<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page isELIgnored="false"%>
<%@ include file="../common/taglibs.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<title>POS收单运营管理平台</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<link href="<s:url value="/css/common.css"/>" type="text/css" rel="stylesheet" />
<link href="<s:url value="/css/multiselect/prettify.css"/>" type="text/css" rel="stylesheet" />
<link href="<s:url value="/css/multiselect/style.css"/>" type="text/css" rel="stylesheet" />
<link href="<s:url value="/bootstrap-3.3.7/dist/css/bootstrap.min.css"/>" type="text/css" rel="stylesheet" />
<link href="<s:url value="/bootstrap-3.3.7/dist/css/bootstrap.css"/>" type="text/css" rel="stylesheet" />

<script type="text/javascript"
	src="<s:url value="/js/jquery-1.9.1.js" />"></script>
<script type="text/javascript"
	src="<s:url value="/js/jquery-1.9.1.min.js" />"></script>
<script type="text/javascript"
	src="<s:url value="/js/jquery.validate.min.js" />"></script>
<script type="text/javascript"
	src="<s:url value="/js/pwms.validate.js?v1" />"></script>
<script language="javascript" type="text/javascript"
	src="<s:url value="/js/My97DatePicker/WdatePicker.js"/>"></script>
<script language="javascript" type="text/javascript"
	src="<s:url value="/js/multiselect/multiselect.min.js"/>"></script>
	<script language="javascript" type="text/javascript"
	src="<s:url value="/bootstrap-3.3.7/dist/js/bootstrap.min.js"/>"></script>
	
<style type="text/css">

.error {
	color: red;
}

</style>

<script type="text/javascript">
var interval;
var timeOver = 120;
$(document).ready(
			function() {
				// 字符最大长度验证（一个中文字符长度为2）
				jQuery.validator.addMethod("stringMaxLength", function(value,element, param) {
					var length = value.length;
					for ( var i = 0; i < value.length; i++) {
						if (value.charCodeAt(i) > 127) {
							length++;
						}
					}
					return this.optional(element) || (length <=param);
				}, $.validator.format("长度不能大于{0}!"));
				
			$("#updateForm").validate({
		
			debug : true,
			submitHandler : function(form) {
				var agentIds = "";
			    $("#multiselect_to_1 option").each(function(){
			        var val = $(this).val();
			        agentIds = agentIds +val+ ",";
			    });
			    $("#agentTo").val(agentIds);
				form.submit();
			},
			
			rules : {
				"oper.accountNo" : {
					required : true,
				//	stringCheck :true
					isABC:true,
					stringMaxLength:30
				},
				"oper.mobile" : {
					required : true,
					isMobile : true,
					stringMaxLength:11
				},
				
				"oper.cardType" : {
					required : true
				},
				"oper.cardNo" : {
					required : true,
					stringMaxLength:50,
					isIdCardNo:true
				},
				"oper.realName" : {
					required : true,
					stringMaxLength:150
				},
				"oper.telphone" : {
					stringMaxLength:15
				},
				"oper.shortName" : {
					stringMaxLength:20
				},
				"oper.email" : {
					email : true,
					stringMaxLength:50
				},
				"oper.address" : {
					required : true,
					stringMaxLength:200
				},
				"oper.remark" : {
					stringMaxLength:200
				}

			},
			messages : {
				"oper.accountNo" : {required : "必填",isABC:"账号必须为英文或数字"},
				"oper.mobile" : {required : "必填"},
				"oper.realName" : {required : "必填"},
				"oper.cardType" : {required : "必填"},
				"oper.cardNo" : {required : "必填"},
				"oper.email" : {email : "请输入有效的Email地址"},
				"oper.address" : {required : "必填"}
			},
			onsubmit : true,
			errorPlacement: function(error, element) { 
			    if ( element.is(":radio") ) error.appendTo ( element.parent() ); 
			    else if ( element.is(":checkbox") ) error.appendTo ( element.parent()); 
			 
			    else if ( element.is("input") ) {
			    	var name = element[0].name;
			    	if( name == "oper.address"  || name == "oper.email" || name == "oper.remark" 
			    			|| name == "oper.shortName" || name == "oper.telphone"){
				        error.appendTo ( element.parent().parent() ); 
			    	}else{
				    	error.appendTo ( element.parent().next() );
			    	}
			    }
			    else if ( element.is("select") ) error.appendTo ( element ); 
			    else error.insertAfter(element); 
			} 

		});	
			
			$("#areaId").change(function(){
				var areaId=$(this).val();
				$("#agentName").html("");
				$("#multiselect_to_1").html("");
				if(areaId=="-1"){
					$("#agentName").html("");
					$("#multiselect_to_1").html("");
					$("#agentTr").hide();
					return false;
				}
				$.ajax({
					url:"<%=basePath%>/pages/queryAgentBySupAgent.ct",
					type:"post",
					data:{"areaId":areaId},
					dataType:"json",
					success:function(result){
						var operatorList = result.operatorList;
						$("#agentName").html("");
						var htmlStr = "";
						$.each(operatorList,function(i,operator){ 
							htmlStr += "<option value='"+operator.org_code+"'>"+operator.orgName+"</option>";
						});
						$("#agentName").html(htmlStr);
						
					},error:function(){
						alert("未知错误！");
					}
				});
				$("#agentTr").show();
			});
});
function go(){
	     history.go(-1);
}


</script>

</head>

<body>
			<s:form  namespace="/query" action="saveOperator.ct" method="post"
				cssClass="cmxform" id="updateForm" theme="simple">
				<s:hidden name="oper.id"></s:hidden>
				<s:hidden id="roleType" name="oper.roleType" />
				<table class="tb" >
			        <tr class="tb-line">
			            <td class="tb-td" colspan="6"><div class="tb-h2">POS收单运营管理平台</div></td>
			        </tr>
			
	                <tr class="tb-line bg-gray">
			            <td class="tb-td" colspan="6"><div class="tb-h3">操作员详细信息</div></td>
			        </tr>
					
					<tr class="tb-line">
					    <td width="12%" style="min-width: 150px" align="right" class="tb-td">
				        	<div class="tb-h4">账号：</div>
				        <td class="tb-td" >
				            <label class="tb-input-normal">
						   		<s:property  value="oper.accountNo" /><s:hidden name="oper.accountNo" />
						   </label>
						</td>
					    <td width="12%" style="min-width: 150px" align="right" class="tb-td">
				        	<div class="tb-h4">角色类型：</div>
				        <td class="tb-td" >
				            <label class="tb-input-normal">
				            	<s:property  value="oper.roleName" />
						   </label>
						</td>
					</tr> 
					<tr>
						<s:if test="#session.session_merchant.roleType==\"03\"||#session.session_merchant.roleType==\"15\" || #session.session_merchant.roleType==\"16\"">
				  
					    	<td width="12%" style="min-width: 150px" align="right" class="tb-td">
					        	<div class="tb-h4"></div>
					        <td class="tb-td" >
					            <label class="tb-input-normal">
	                  				<s:hidden name="oper.orgCode" value="%{#session.session_merchant.orgCode}" />
							   </label>
							</td>
						</s:if>
						<s:else>
					    	<td width="12%" style="min-width: 150px" align="right" class="tb-td">
					        	<div class="tb-h4">所属机构：</div>
					        <td class="tb-td" >
					            <label class="tb-select">
					            	<s:select cssClass="queryWidth" name="oper.orgCode"
					            		id="orgCode" list="#request.orgList" listKey="insIdCd" listValue="insName" /> <span id="testDIV"></span>
							   </label>
							   <font color="red">*</font>
							</td>
						</s:else>
					    <td width="12%" style="min-width: 150px" align="right" class="tb-td">
				        	<div class="tb-h4">手机号：</div>
				        <td class="tb-td" >
				            <label class="tb-input-normal">
				            	<s:textfield cssClass="queryWidth" id="mobile" name="oper.mobile" maxlength="11"/>
						   </label>
						   <font color="red">*</font>
						</td>
					</tr>
					<tr class="tb-line">
					    <td width="12%" style="min-width: 150px" align="right" class="tb-td">
				        	<div class="tb-h4">证件类型：</div>
				        <td class="tb-td" >
				            <label class="tb-select">
				            	<s:select cssClass="queryWidth" name="oper.cardType"
								id="cardType"
								list="#{'01':'身份证','02':'护照','03':'军官证','04':'驾照','05':'其他' }" />
						   </label>
						   <font color="red">*</font>
						</td>
						
					    <td width="12%" style="min-width: 150px" align="right" class="tb-td">
				        	<div class="tb-h4">证件号：</div>
				        <td class="tb-td" >
				            <label class="tb-input-normal">
				            	<s:textfield cssClass="queryWidth" id="cardNo" name="oper.cardNo" maxlength="50"/>
						   </label>
						   <font color="red">*</font>
						</td>
						
					</tr>
					<tr class="tb-line">
						
					    <td width="12%" style="min-width: 150px" align="right" class="tb-td">
				        	<div class="tb-h4">真实姓名：</div>
				        <td class="tb-td" >
				            <label class="tb-input-normal">
				            	<s:textfield cssClass="queryWidth" id="realName" name="oper.realName" maxlength="150"/>
						   </label>
						   <font color="red">*</font>
						</td>
						
					    <td width="12%" style="min-width: 150px" align="right" class="tb-td">
				        	<div class="tb-h4">联系电话：</div>
				        <td class="tb-td" >
				            <label class="tb-input-normal">
				            	<s:textfield cssClass="queryWidth" id="telphone" name="oper.telphone" maxlength="15"/>
						   </label>
						</td>
					</tr>	
					
					<tr class="tb-line">
						
					    <td width="12%" style="min-width: 150px" align="right" class="tb-td">
				        	<div class="tb-h4">EMAIL：</div>
				        <td class="tb-td" >
				            <label class="tb-input-normal">
				            	<s:textfield cssClass="queryWidth" id="email" name="oper.email" maxlength="50"/>
						   </label>
						</td>
						
					    <td width="12%" style="min-width: 150px" align="right" class="tb-td">
				        	<div class="tb-h4">性别：</div>
				        <td class="tb-td" >
				            <label class="tb-select">
				            	<s:select cssClass="queryWidth" name="oper.sex"
								id="sex"
								list="#{'1':'男','0':'女' }" />
						   </label>
						</td>
					</tr>
			
					<tr class="tb-line">
						
					    <td width="12%" style="min-width: 150px" align="right" class="tb-td">
				        	<div class="tb-h4">详细地址：</div>
				        <td class="tb-td" colspan="3" style="height:auto;line-height:auto;" >
				            <label style="height:auto;line-height:auto;">
				            	<s:textfield id="address" name="oper.address"  maxlength="200" 
								  style="height: 30px; resize: none; width: 740px;padding:0 5px;"/>
						   </label>
						   <font color="red">*</font>
						</td>
					</tr>
					<tr class="tb-line">
						
					    <td width="12%" style="min-width: 150px" align="right" class="tb-td">
				        	<div class="tb-h4">备注：</div>
				        </td>
				        <td class="tb-td" colspan="3" style="height:auto;line-height:auto;">
				            <label style="height:auto;line-height:auto;">
				            	<s:textarea rows="5" cssClass="someWidth" name="oper.remark" maxlength="200"  style="height: 102px; resize: none; width: 530px;padding:0 5px;"/>
				            </label>	
				        </td>        
					</tr>
					<tr class="tb-line">
						<td colspan="4" align="center"><span style="font-color: red"><s:actionerror /></span>
							<span style="font-color: red;"><s:actionmessage /></span > <span style="font-color: red;"><s:fielderror
									cssClass="fieldError" /></span>
							<span id="otherError"></span>
						</td>
					</tr>
					<s:if test="oper.roleType=='04'||oper.roleType=='05'">
					<tr class="tb-line">
						 <td width="12%" style="min-width: 150px" align="right" class="tb-td">
					    	<div class="tb-h4">管理区域：</div>
					    </td>
						<td class="tb-td">
		                	<label class="tb-select">
								<s:select cssClass="queryWidth" name="areaId"
								id="areaId" value="oper.areaIdRole"  headerValue="全部" headerKey="-1"
								list="#request.areaList" listKey="id" listValue="name"/>
		                	</label>
							<font color="red">*</font> <span id="testDIV"></span>
						</td>
					</tr>
					<tr class="tb-line" id="agentTr">
					<s:textfield type="hidden" id="agentTo" name="agentTo"></s:textfield>
						<td width="12%" style="min-width: 150px" align="right" class="tb-td">
					    	<div class="tb-h4">管理代理商：</div>
					    </td>
						<td colspan="3">
			                <div class="col-xs-5">
			                    <select id="agentName" name="from[]" class="multiselect form-control" size="8" multiple="multiple" data-right="#multiselect_to_1" data-right-all="#right_All_1" data-right-selected="#right_Selected_1" data-left-all="#left_All_1" data-left-selected="#left_Selected_1" style="min-height: 175px">
			                        <s:iterator value="oper.outOrgMainList" var="orgMain">
			                        	<option value="<s:property value='#orgMain.org_code' />"><s:property value='#orgMain.orgName' /></option>
			                        </s:iterator>
			                    </select>
			                </div>
                
			                <div class="col-xs-2">
			                    <button type="button" id="right_All_1" class="btn btn-block" style="margin-top: 25px"><i class="glyphicon glyphicon-forward"></i></button>
			                    <button type="button" id="right_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
			                    <button type="button" id="left_Selected_1" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
			                    <button type="button" id="left_All_1" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
			                </div>
                
			                <div class="col-xs-5">
			                    <select name="to[]" id="multiselect_to_1" class="form-control" size="8" multiple="multiple" style="min-height: 175px">
			                    	<s:iterator value="oper.inOrgMainList" var="orgMain">
			                        	<option value="<s:property value='#orgMain.org_code' />"><s:property value='#orgMain.orgName' /></option>
			                        </s:iterator>
			                    </select>
			                </div>
						</td>
					</tr>
					</s:if>	
					<tr class="tb-line">
			            <td class="tb-td line-submit" align="right" colspan="4">
			                <label class="tb-input-submit">
								<s:submit id="btnSave" value="保存"/>
							</label> 
			                <label class="tb-input-submit">
								<s:reset  value="取  消"/>
							</label>
						</td>
					</tr>
				</table>

			</s:form>
	
</body>
<script type="text/javascript">
$(document).ready(function() {
    window.prettyPrint && prettyPrint();
    $('.multiselect').multiselect();
});
</script>
</html>
